import React from 'react'
import { Space, List, Switch } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Button, Input, Form, Picker,Toast } from 'react-vant'
import { Image, NavBar} from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import { useState } from 'react'
import { post } from '../../../axios/request'
export default function Payment() {
  let navigate=useNavigate()
  const [form] = Form.useForm()
  const [pid,setPid]=useState('')
  let users = sessionStorage.getItem('users')
  let [p,setP]=useState('')
  let phone=''
  const [ucode,setUcode]=useState('')
  const [code,setCode]=useState('')
  if (users) {
    try {
      const userObj = JSON.parse(users)
      // console.log(userObj);
      phone = userObj.phone
      let a=phone
      // console.log(a,'a');
      
      // setP(a)
      // console.log(phone);
      // setPid(phone)
      // 获取前三位添加4个*然后再添加手机号的后四位
      phone = `${phone.slice(0, 3)}****${phone.slice(7)}`

    } catch (error) {
      console.log('users为空');

    }
  }
  
  const onFinish = values => {
    console.log(values)
  }
  // 获取短信验证码
  const getcode=async()=>{
    // console.log('gf');
    
    const userObj = JSON.parse(users)
    // console.log(userObj);
    let phoneid = userObj.phone
    console.log(phoneid,'222');
    let {data}=await post('/getcode',{phoneid})
    console.log(data,'code');
    setCode(data)
    
    
    // setP(a)
    // console.log(phone);
  }

  // 验证验证码
  const checkcode=async()=>{
    if(code===ucode){
      Toast.success('验证码正确')
      setTimeout(()=>{
        navigate('/paypwd')
      },1000)
    }else{
      Toast.fail('验证码错误')
    
    }
  }
  return (
    <div id='payment'>
      <div className="top">
      <NavBar
          style={{ backgroundColor: '#FFFFFF' }}
          back={
            <>
              <ArrowLeft />
              返回
            </>
          }
          onBackClick={()=>{navigate(-1)}}
        >
          设置支付密码
        </NavBar>
        {/* <ArrowLeft></ArrowLeft> */}
      </div>
      <div className="cen">
        <div style={{display:'flex',width:'200px',margin:'0 auto'}} className="logo">
          <div style={{width:'1.2rem',height:'1.2rem',backgroundColor:'#52CC6F',borderRadius:'50%'}} className="left">
            <svg style={{width:'0.65rem',height:'0.65rem',marginLeft:'0.25rem',marginTop:'0.20rem'}} t="1727494317666" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2599" width="200" height="200"><path d="M501.76 579.584c-9.216 0-19.456 1.024-30.72 2.048-41.984 3.072-83.968 9.216-123.904 19.456-99.328 25.6-171.008 67.584-211.968 123.904-18.432 24.576-32.768 61.44-44.032 106.496-7.168 27.648-12.288 57.344-16.384 87.04-1.024 10.24-3.072 19.456-3.072 28.672-1.024 5.12-1.024 9.216-1.024 11.264-1.024 16.384 10.24 29.696 26.624 31.744s29.696-10.24 31.744-26.624c0-2.048 0-5.12 1.024-10.24 1.024-8.192 2.048-17.408 3.072-26.624 4.096-27.648 9.216-55.296 15.36-80.896 9.216-37.888 21.504-68.608 33.792-86.016 32.768-44.032 93.184-79.872 180.224-102.4 35.84-9.216 74.752-15.36 113.664-17.408 19.456-1.024 36.864-2.048 51.2-2.048 15.36 0 32.768 1.024 51.2 2.048 38.912 3.072 77.824 8.192 113.664 17.408 86.016 20.48 147.456 56.32 179.2 100.352 13.312 17.408 24.576 47.104 33.792 86.016 6.144 25.6 11.264 53.248 15.36 80.896 1.024 9.216 2.048 18.432 3.072 26.624 1.024 5.12 1.024 8.192 1.024 10.24 1.024 16.384 15.36 27.648 31.744 26.624 16.384-1.024 27.648-15.36 26.624-31.744 0-2.048-1.024-6.144-1.024-11.264-1.024-8.192-2.048-18.432-4.096-28.672-4.096-29.696-9.216-59.392-16.384-87.04-11.264-45.056-25.6-80.896-44.032-105.472-40.96-56.32-113.664-98.304-212.992-123.904-39.936-10.24-81.92-16.384-123.904-19.456-11.264-1.024-21.504-1.024-30.72-2.048h-47.104s-1.024 0-1.024 1.024zM526.336 478.208c96.256 0 175.104-77.824 175.104-174.08s-78.848-174.08-175.104-174.08c-96.256 0-175.104 77.824-175.104 174.08s77.824 174.08 175.104 174.08z m0 58.368c-129.024 0-233.472-103.424-233.472-231.424 0-128 104.448-232.448 232.448-232.448 129.024 0 233.472 103.424 233.472 231.424 0 128-103.424 232.448-232.448 232.448z" fill="#ffffff" p-id="2600"></path></svg>
          </div>
          <span>
          <svg style={{width:'2.3333rem',height:'0.7333rem',marginLeft:'0.05rem',marginTop:'0.2rem'}} t="1727512182368" className="icon" viewBox="0 0 25600 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13631" width="200" height="200"><path d="M0 512l25599.488 512V0z" fill="#52CC6F" p-id="13632"></path></svg>
          
          </span>
          <div  style={{width:'1.2rem',height:'1.2rem',backgroundColor:'#52CC6F',borderRadius:'50%'}} className="right">
          <svg style={{width:'0.7333rem',height:'0.7333rem',marginLeft:'0.2333rem',marginTop:'0.2rem'}} t="1727494366456" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3691" width="200" height="200"><path d="M958.359001 286.941198c0-64.308655-52.132334-116.440989-116.440989-116.440989L181.453678 170.500209c-64.308655 0-116.440989 52.132334-116.440989 116.440989l0 448.63995c0 64.308655 52.132334 116.440989 116.440989 116.440989l660.464333 0c64.308655 0 116.440989-52.132334 116.440989-116.440989L958.359001 286.941198zM843.814198 212.455763c12.059664 0 23.444968 3.465938 33.519418 8.598842L530.749016 549.347606c-1.227967 1.161453-1.156336 0.916882-1.752924 1.868557-1.426489 1.067308-6.055926 3.922333-15.449877 3.922333-9.397021 0-14.025435-2.75474-15.4509-3.818979-0.676405-1.077541-0.662079-0.716314-1.995447-1.940189l-353.122503-324.412624c11.609409-7.557116 25.445532-12.509918 40.300868-12.509918L843.814198 212.456786zM916.403446 736.484727c0 40.857547-31.730679 73.582879-72.589248 73.582879L183.27721 810.067606c-40.85857 0-75.28566-32.725332-75.28566-73.582879L107.99155 287.657512c0-10.630105 2.860141-20.735253 6.909363-29.882588l351.486236 322.096882c4.91187 5.302773 19.479657 17.676591 47.009663 17.676591 27.799136 0 42.303478-12.618389 47.076178-17.830087l346.800517-328.899822c6.251378 10.860349 9.129938 23.433712 9.129938 36.838L916.403446 736.484727z" fill="#ffffff" p-id="3692"></path></svg>
          
          </div>
        </div>
        <div style={{display:'flex',width:'200px',margin:'10px auto',justifyContent:'space-between'}} className="wz">
          <span style={{fontSize:'13px',display:'inline-block',fontWeight:'bold'}}>身份验证</span>
          <span style={{fontSize:'13px',display:'inline-block',fontWeight:'bold'}}>短信验证</span>
        </div>
        <div className="yz">
        <Form
          form={form}
          onFinish={onFinish}
          footer={
           
              <Button  onClick={()=>{checkcode()}} round nativeType='submit' style={{ backgroundColor: '#2D83FB', color: 'white', width: '8rem', marginLeft: '0.9rem', marginTop: '0.2667rem' }} block>验证信息</Button>
         
            }
        >
          <Form.Item
          
            name='checkcode'
            label='手机号'
          >
            <span>{phone}</span>
            <span  onClick={()=>{getcode()}} style={{marginLeft:'2.4667rem',color:'#3485FB'}}>获取验证码</span>
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请输入验证码' }]}
            name='code'
            label='验证码'
          >
            <Input onChange={(e)=>{setUcode(e)}}  placeholder='请输入验证码' />
            {/* <span onClick={getcode()}>获取验证码</span> */}
          </Form.Item>

          

          
        </Form>
        </div>
      </div>
    </div>
  )
}
